import React from 'react'
import PropTypes from 'prop-types'
import {routerRedux} from 'dva/router'
import {connect} from 'dva'
import {Button, Card, Col, message, Popconfirm, Row} from 'antd'
import {Page} from 'components'
import queryString from 'query-string'
import List from './components/List'
import Filter from './components/Filter'
import Modal from './components/Modal'
import {WxChatModal} from "components/WeChat"
import {findList} from "services/message"


class PersonalChatRecords extends React.Component {

  render () {
    const {location, dispatch, personalChatRecords, message: wxMessage, loading} = this.props
    const {query, pathname} = location
    const {
      list, pagination, currentItem, modalVisible, disable, modalType, selectedRowKeys, wxChatModalVisible, chatData,
    } = personalChatRecords

    const handleRefresh = (newQuery) => {
      dispatch(routerRedux.push({
        pathname,
        search: queryString.stringify({
          ...query,
          ...newQuery,
        }),
      }))
    }

    const modalProps = {
      item: modalType === 'create' ? {} : currentItem,
      visible: modalVisible,
      disable,
      width: 820,
      maskClosable: false,
      confirmLoading: loading.effects[`personalChatRecords/${modalType}`],
      title: `${modalType === 'create' ? '手动添加设备' : disable ? '手机详情' : '编辑手机信息'}`,
      wrapClassName: 'vertical-center-modal',
      onOk (data) {
        if (disable) {
          dispatch({
            type: 'personalChatRecords/hideModal',
          })
        } else {
          dispatch({
            type: `personalChatRecords/${modalType}`,
            payload: data,
          })
            .then(() => {
              handleRefresh()
              message.success("操作成功")
            })
        }
      },
      onCancel () {
        dispatch({
          type: 'personalChatRecords/hideModal',
        })
      },
    }


    const listProps = {
      rowKey: 'id',
      dataSource: list,
      loading: loading.effects['personalChatRecords/query'],
      pagination,
      location,
      onChange (page) {
        handleRefresh({
          current: page.current,
          size: page.pageSize,
        })
      },

      showWxChatModal (data) {
        const {
          customerWxId,
          operator: {wxId, icon: oicon, nickname, remark},
          customer: {icon: cicon, friendNickname, friendRemark},
          chatTime,
          isRecommand,
        } = data

        dispatch({
          type: 'message/findList',
          payload: {
            current: 1,
            size: 10,
            cwxId: customerWxId,
            owxId: wxId,
            chatTime,
          },
        })
        dispatch({
          type: 'message/showModal',
          payload: {
            recommended: isRecommand,
            contactNickname: friendNickname,
            ownerNickname: nickname,
            ownerAvatarUrl: oicon,
            contactAvatarUrl: cicon,
            cwxId: customerWxId,
            owxId: wxId,
            chatTime: chatTime,//
          }
        })
      },

      onDeleteItem (id) {
        dispatch({
          type: 'personalChatRecords/delete',
          payload: id,
        })
          .then(() => {
            handleRefresh({
              current: (list.length === 1 && pagination.current > 1) ? pagination.current - 1 : pagination.current,
            })
            message.success("删除成功")
          })
      },
      onEditItem (item, disable) {
        dispatch({
          type: 'personalChatRecords/showModal',
          payload: {
            modalType: 'update',
            currentItem: item,
            disable,
          },
        })
      },
      rowSelection: {
        selectedRowKeys,
        onChange: (keys) => {
          dispatch({
            type: 'personalChatRecords/updateState',
            payload: {
              selectedRowKeys: keys,
            },
          })
        },
        onSelect: (record) => {
          dispatch({
            type: 'personalChatRecords/updateState',
            payload: {
              selectRecord: record,
            },
          })
        },
      },
    }

    const filterProps = {
      filter: {
        ...query,
      },
      onFilterChange (value) {
        handleRefresh({
          ...value,
          current: 1,
        })
      },
      onAdd () {
        dispatch({
          type: 'personalChatRecords/showModal',
          payload: {
            modalType: 'create',
            disable: false,
          },
        })
      },
    }

    const handleDeleteItems = () => {
      dispatch({
        type: 'personalChatRecords/multiDelete',
        payload: {
          ids: selectedRowKeys,
        },
      })
        .then(() => {
          handleRefresh({
            current: (list.length === selectedRowKeys.length && pagination.current > 1) ? pagination.current - 1 : pagination.current,
          })
          message.success("商品删除成功")
        })
    }

    const updateState = (payload) => {
      this.setState(payload)
    }

    const wxChatModalProps = {
      titleVisible: true,
    }

    return (
      <div>
        <Row gutter={24}>
          <Card style={{marginBottom: 12}}>
            <Filter {...filterProps}/>
          </Card>
        </Row>
        <Row gutter={24}>
          <Page inner>
            {
              selectedRowKeys.length > 0 &&
              <Row style={{marginBottom: 24, textAlign: 'right', fontSize: 13}}>
                <Col>
                  {`选中了 ${selectedRowKeys.length} 条数据`}
                  <Popconfirm title="确定要删除这些数据吗?" placement="left" onConfirm={handleDeleteItems}>
                    <Button type="danger" style={{marginLeft: 8}}>删除</Button>
                  </Popconfirm>
                </Col>
              </Row>
            }
            <List {...listProps} />
            {modalVisible && <Modal {...modalProps} />}
          </Page>
        </Row>
        {wxMessage['modalVisible'] && <WxChatModal {...wxChatModalProps}/>}
      </div>
    )
  }
}

PersonalChatRecords.propTypes = {
  employee: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({personalChatRecords, message, loading}) => ({personalChatRecords, message, loading}))(PersonalChatRecords)
